// import { useRoutes } from "react-router-dom";
// import Contaier from "../components/layout/index";
// import './global.scss'
// import  React from "react";
import { useRoutes , Navigate } from "react-router-dom";

import Login from "../views/Login/Login";
import Home from "../views/Home/Home";
import Layout from "../component/layout/index";
// import List from '../pages/List';
// import Detail from '../pages/Detail';
// import Home from '../pages/Home';
// import Uc from '../pages/Uc';
// import Login from '../pages/Login';
// import ChangePwd from '../pages/Pwd';
// import ChangeName from '../pages/ChangeName';


import React, { Component } from 'react'

class Router extends Component {
  render() {
    
    // 允许我们通过一个数组的方式来进行路由的配置
    // 通过这种方式  能更好的让我们进行模块化的开发 灵活的进行路由 配置
  let element = useRoutes([
    // { path: '/login' ,  },
    { path: "/login", element: <Login /> },
    { path: "/", element: <Layout />  , children:[
        { path:'index' , element: <Home /> }
        // children就是Outlet ，
    ]},
    { path: '*' , element:<Navigate to="/index" /> }
    // Navigate 为定义重定向，加上通配符* ，可以判断是否为现有的路由，如果不是则 执行重定向 to 的路由
  ]);
    return element ;
  }
}

export default Router ;


//     // 允许我们通过一个数组的方式来进行路由的配置
//     // 通过这种方式  能更好的让我们进行模块化的开发 灵活的进行路由 配置
//   let element = useRoutes([
//     { path: "/", element: <Home /> },
//     { path: "/list", element: <List /> },
//     { path:"/detail/:id", element: <Detail /> },
//     { 
//         path:"/uc" ,
//         element: <Uc />,
//         children: [
//             { path:'pwd' ,element: <ChangePwd/> },
//             { path:'name' ,element: <ChangeName/> },
//         ] 
//     },
//     { path: "/login", element: <Login /> },
//     { path: "*", element: <NotFound /> },

//   ]);
// return element}



// export default